{% extends 'backend/home-list.html' %}
{% load static %}
{% block Link %}
    <!-- One of the following themes -->
    <link rel="stylesheet" href="{% static 'pickr/themes/classic.min.css' %}"/>
    <!-- 'classic' theme -->
    <link rel="stylesheet" href="{% static 'pickr/themes/monolith.min.css' %}"/>
    <!-- 'monolith' theme -->
    <link rel="stylesheet" href="{% static 'pickr/themes/nano.min.css' %}"/>
    <!-- 'nano' theme -->

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3279671_bkhbbgwtehr.css">
    <style>
        .icon_lists {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            padding-left: 0;
        }


        .icon_lists li {
            width: 50px;
            text-align: center;
            list-style: none !important;
            cursor: default;
        }


        .icon_lists .icon {
            display: block;
            height: 50px;
            font-size: 25px;
            color: #333;
            -webkit-transition: font-size 0.25s linear, width 0.25s linear;
            -moz-transition: font-size 0.25s linear, width 0.25s linear;
            transition: font-size 0.25s linear, width 0.25s linear;
        }

        .icon_lists .icon:hover {
            font-size: 40px;
        }

        .icon_lists .svg-icon {
            /* 通过设置 font-size 来改变图标大小 */
            width: 1em;
            /* 图标和文字相邻时，垂直对齐 */
            vertical-align: -0.15em;
            /* 通过设置 color 来改变 SVG 的颜色/fill */
            fill: currentColor;
            /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
                normalize.css 中也包含这行 */
            overflow: hidden;
        }

        .icon_lists li .name {
            color: #666;
            letter-spacing: 1px;
            font-size: 9px;
        }


    </style>
{% endblock %}
{% block tableFilter %}
    <div class="card-header p-4">

        <div class="row g-3">

            <!-- product filter -->
            <div class="order-2 order-md-1 col">
                {#                <form method="get" class="position-relative d-flex align-items-center">#}

                <!-- search icon -->
                <svg class="z-index-1 position-absolute start-0 ms-3 text-primary" width="18px"
                     height="18px"
                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>

                <div class="dropdown w-100">
                    <input type="text"
                           class="dropdown-toggle form-control form-control-sm border-0 shadow-none ps-5 bg-gray-100"
                           data-bs-toggle="dropdown" data-bs-auto-close="outside"
                           placeholder="Product title / SKU">

                    <!--
                      .dropdown-mega-sm
                      .dropdown-mega-md
                      .dropdown-mega-lg
                      .dropdown-mega-xl
                    -->
                    <div class="dropdown-menu dropdown-mega-lg shadow-lg p-4 mt-1">
                        <h6 class="mb-4">Filter products</h6>

                        <div class="row g-3 mb-3">
                            <div class="col-lg-6">

                                <div class="form-floating mb-3">
                                    <select class="form-select" id="filter-category" aria-label="Category">
                                        <option value="" selected>Any</option>
                                        <option value="1">Shoes</option>
                                        <option value="2">Men tshirt</option>
                                        <option value="3">Women thisrt</option>
                                    </select>
                                    <label for="filter-category">Category</label>
                                </div>

                            </div>
                            <div class="col-lg-6">

                                <div class="form-floating mb-3">
                                    <select class="form-select" id="filter-brand" aria-label="Brand">
                                        <option value="" selected>Any</option>
                                        <option value="1">Nike</option>
                                        <option value="2">Adidas</option>
                                        <option value="3">Loreal</option>
                                    </select>
                                    <label for="filter-brand">Brand</label>
                                </div>

                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check d-block d-sm-inline-block me-2 mb-2">
                                <input class="form-check-input form-check-input-primary" type="checkbox"
                                       value="1" id="filter-saleprice">
                                <label class="form-check-label user-select-none" for="filter-saleprice">
                                    Sale price
                                </label>
                            </div>

                            <div class="form-check d-block d-sm-inline-block me-2 mb-2">
                                <input class="form-check-input form-check-input-primary" type="checkbox"
                                       value="1" id="filter-preorder">
                                <label class="form-check-label user-select-none" for="filter-preorder">
                                    Allow preorders
                                </label>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-4">
                            <button type="submit" class="btn btn-sm btn-primary">Apply filter</button>
                            <a href="#!" class="btn btn-sm btn-danger btn-soft float-end">Reset</a>
                        </div>

                    </div>
                </div>
            </div>
            <!-- options -->
            <div class="order-1 order-md-2 col-md-auto">
                <div class="group-items" role="group" aria-label="Product options">
                    <button type="button" class="w-100 btn btn-sm btn-primary" onclick="toolkitCreate()">
                        <svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        <span>创建</span>
                    </button>
                </div>

                <!-- Modal : review add -->
                <div class="modal fade" id="review-add" data-bs-backdrop="static" tabindex="-1"
                     aria-labelledby="review-add-label" aria-hidden="true">
                    <form id="toolkit-form" class="form-validate modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="review-add-label">工具</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-4">

                                <div class="bg-light p-2 rounded mb-3">
                                    <div class="form-floating mb-2">
                                        <input type="text" class="form-control" id="toolkit-name"
                                               placeholder="名称" name="name"
                                               data-rule="required:true|maxlength:50">
                                        <label for="review-author">名称</label>
                                        <div class="invalid-feedback" id="toolkit-name-err">
                                        </div>
                                    </div>

                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="toolkit-url" name="url"
                                               placeholder="url"
                                               data-rule="required:true|maxlength:100">
                                        <label for="p-search">地址(url)</label>
                                        <div class="invalid-feedback" id="toolkit-url-err">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-floating mb-3">
                                    <textarea class="form-control" placeholder="描述"
                                              id="toolkit-describe" name="describe"
                                              style="height: 200px"
                                              data-rule="required:true"
                                    ></textarea>
                                    <label for="review-body">描述</label>
                                    <div class="invalid-feedback" id="toolkit-describe-err">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" onclick="toolkitSubmit()" class="btn btn-primary">
                                    <svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg"
                                         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                         stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12"></polyline>
                                    </svg>
                                    <span>提交</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

        <!-- active filters -->
        <ul class="list-inline mt-2 mb-0">
            <li class="list-inline-item badge bg-primary me-1">
                <a href="#!" class="text-white text-decoration-none d-flex align-items-center">
                    <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                    </svg>
                    <span class="text-white ms-1">Filters:</span>
                </a>
            </li>
            <li class="list-inline-item me-1">
                <a href="#!" class="badge bg-light link-muted d-inline-grid gap-auto-1">
                    <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                    </svg>
                    <span class="text-muted">Category</span>
                </a>
            </li>
            <li class="list-inline-item me-1">
                <a href="#!" class="badge bg-light link-muted d-inline-grid gap-auto-1">
                    <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                    </svg>
                    <span class="text-muted">Brand</span>
                </a>
            </li>
            <li class="list-inline-item me-1">
                <a href="#!" class="badge bg-light link-muted d-inline-grid gap-auto-1">
                    <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                    </svg>
                    <span class="text-muted">Sale</span>
                </a>
            </li>
            <li class="list-inline-item me-1">
                <a href="#!" class="badge bg-light link-muted d-inline-grid gap-auto-1">
                    <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                    </svg>
                    <span class="text-muted">Preorder</span>
                </a>
            </li>
        </ul>


    </div>
{% endblock %}
{% block tableItem %}
    <div class="card-body pt-1">

        <!-- item list -->
        <div class="table-responsive-md">

            <table class="table table-align-middle" role="grid" aria-describedby="mobile-page-info">
                <thead>
                <tr>
                    <th style="width:46px">
                        <div class="form-check"><!-- check all -->
                            <input data-checkall-container="#checkall-list" class="form-check-input" type="checkbox"
                                   value="1">
                        </div>
                    </th>
                    <th class="small text-muted" style="width:20px">名称/地址</th>
                    <th class="small text-muted">描述</th>
                    <th class="small text-muted" style="width:64px">操作</th>
                </tr>
                </thead>
                <tbody id="checkall-list">

                <!-- item -->
                {% for toolkit in toolkits %}
                    <tr>
                        <th><!-- check -->
                            <div class="form-check">
                                <input class="form-check-input form-check-input-primary" type="checkbox" value="">
                            </div>
                        </th>

                        <td class="position-relative"><!-- order -->
                            <a href="{{ toolkit.url }}"
                               class="link-normal fw-medium stretched-link d-block">{{ toolkit.name }}</a>
                            <span class="d-block smaller text-muted">
                          {{ toolkit.url }}
                        </span>
                        </td>


                        <td class="position-relative"><!-- order -->
                            {#                            <a href="#!" class="link-normal fw-medium stretched-link d-block">#1003</a>#}
                            <span class="d-block smaller text-muted">
                          {{ toolkit.describe }}
                        </span>
                        </td>
                        <td class="dropstart"><!-- options -->
                            <a class="btn btn-sm btn-light btn-icon btn-ghost text-muted rounded-circle dropdown-toggle"
                               href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"
                               data-bs-offset="0,0">
                          <span class="group-icon">
                            <svg height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                                 fill="currentColor"><path fill-rule="evenodd"
                                                           d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path></svg>
                            <svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6"
                                                                                                          x2="18"
                                                                                                          y2="18"></line></svg>
                          </span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-clean">
                                <li class="small px-3 py-2 text-muted">Set order</li>
                                <li>
                                    <a class="dropdown-item"
                                       onclick="toolkitUpdate('{{ toolkit.id }}','{{ toolkit.name }}','{{ toolkit.url }}','{{ toolkit.describe }}')">
                                        <svg class="text-muted" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                        </svg>
                                        <span>编辑</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" onclick="deleteToolkit({{ toolkit.id }})">
                                        <svg class="text-muted" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
                                        </svg>
                                        <span class="w-100">删除</span>
                                    </a>
                                </li>
                            </ul>
                        </td>
                    </tr>
                {% endfor %}
                <!-- end item -->

                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
{% block selectedItems %}
    <div class="row">
        <div class="col py-3 text-center text-md-start">

            <!-- selected items -->
            <div class="dropup">
                <a class="btn btn-sm btn-primary dropdown-toggle" href="#" role="button" id="ddSelected"
                   data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,0">
                      <span class="group-icon">
                        <svg height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path
                                fill-rule="evenodd"
                                d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6"
                                                                                                      x2="18"
                                                                                                      y2="18"></line></svg>
                      </span>
                    <span>Selected items</span>
                </a>

                <ul class="dropdown-menu shadow-lg p-3 my-2" aria-labelledby="ddSelected">
                    <li class="small px-3 py-2 text-muted">Set order</li>
                    <li>
                        <a class="dropdown-item" href="#!">
                            <svg class="text-muted" width="18px" height="18px" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="20 6 9 17 4 12"></polyline>
                            </svg>
                            <span>Completed</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#!">
                            <svg class="text-muted" width="18px" height="18px" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                            <span>Canceled</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#!">
                            <svg class="text-muted" width="18px" height="18px" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                            <span>Declined</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#!">
                            <svg class="text-muted" width="18px" height="18px" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                            <span>Refunded</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#!">
                            <svg class="text-muted" width="18px" height="18px" xmlns="http://www.w3.org/2000/svg"
                                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
                            </svg>
                            <span class="w-100">Archive</span>
                        </a>
                    </li>
                </ul>

            </div>

        </div>
    </div>
{% endblock %}


{% block javaScripts %}
    {{ block.super }}
    <script src="{% static 'js/form_validate.js' %}"></script>
    <script>
        function deleteToolkit(toolkit_id) {
            $.ajax({
                url: "{% url 'api-toolkit:toolkit-detail' 0  %}".replace(/0/, toolkit_id),
                type: 'DELETE',
                data: {status: status},
                success: function (res) {
                    $.SOW.core.toast.show('success', '', '删除成功', 'top-center', 10000, true);
                    location.reload() // 刷新当前页面
                },
                error: function (jqXHR) {
                    ajax_error(jqXHR, 'article')
                }
            })
        }

        let EDIT_TOOLKIT_ID = null

        function toolkitCreate() {
            var forms = document.getElementById('toolkit-form')
            forms.reset()
            $('#review-add').modal('show')
            EDIT_TOOLKIT_ID = null
        }

        function toolkitUpdate(id, name, url, describe) {
            $('#review-add').modal('show')
            document.getElementById('toolkit-name').value = name
            document.getElementById('toolkit-url').value = url
            document.getElementById('toolkit-describe').value = describe
            EDIT_TOOLKIT_ID = id
        }


        function toolkitSubmit() {
            const cur_form_inputs = $('[data-rule][id^=toolkit-]')
            cur_form_inputs.trigger('blur')
            let flag = Input.input_validate(cur_form_inputs)
            if (flag) {
                var forms = document.getElementById('toolkit-form')
                var formData = new FormData(forms);

                let url = ''
                let method = ''
                if (EDIT_TOOLKIT_ID == null) {
                    url = "{% url 'api-toolkit:toolkit-list' %}"
                    method = 'POST'
                } else {
                    url = "{% url 'api-toolkit:toolkit-detail' 0 %}".replace(/0/, EDIT_TOOLKIT_ID)
                    method = 'PATCH'
                }


                $.ajax({
                    url: url,
                    type: method,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        $.SOW.core.toast.show('success', '', '操作成功', 'top-center', 10000, true);
                        {#$('#paycategory-name').val(''); // name input 设置空#}
                        {#$('#modalPayCategory').modal('hide') // 隐藏model#}
                        {# 添加到指定的列表中#}
                        location.reload() // 刷新当前页面
                    },
                    error: function (jqXHR) {
                        ajax_error(jqXHR, 'toolkit')
                    }
                })
            }
        }
    </script>
{% endblock %}